<template>
	<view :class="{ hide: hidden }">
		<canvas canvas-id="sealCanvas" :style="{ width: sizeNum + 'px', height: sizeNum + 'px' }"></canvas>
	</view>
</template>
<script>
	import props from './props.js';
	import { toPx, getFontSize } from './utils.js';
	export default {
		data() {
			return {
				sizeNum: '',
				fontSize: {},
				ctx: null
			};
		},
		mixins: [props],
		mounted() {
			this.sizeNum = toPx(this.size);
			const width = this.sizeNum / 2;
			const height = this.sizeNum / 2;
			this.fontSize = getFontSize(this.sizeNum);
			setTimeout(() => {
				// 获取canvas上下文
				this.getCtx().then(() => {
					// 绘制圆形
					this.writeCircle(width, height, width, this.sizeNum / 100);
					//绘制内部圆
					if (this.inCircle) {
						this.writeCircle(width, height, width - this.sizeNum / 40, 1);
					}
					//绘制五角星
					this.writeFiveStar(width, height);
					//绘制印章名称
					this.writeSealName(this.sealText);
					//绘制公司名称
					this.writeCompanyName(this.companyText);
					//绘制印章代码
					this.writeSealNo(this.sealCode);
					this.ctx.draw(); // 绘制图形
				});
			}, 500)

		},
		methods: {
			rest() {
				this.sizeNum = toPx(this.size);
				const width = this.sizeNum / 2;
				const height = this.sizeNum / 2;
				this.fontSize = getFontSize(this.sizeNum);
				// 绘制圆形
				this.writeCircle(width, height, width, this.sizeNum / 100);
				//绘制内部圆
				if (this.inCircle) {
					this.writeCircle(width, height, width - this.sizeNum / 40, 1);
				}
				//绘制五角星
				this.writeFiveStar(width, height);
				//绘制印章名称
				this.writeSealName(this.sealText);
				//绘制公司名称
				this.writeCompanyName(this.companyText);
				//绘制印章代码
				this.writeSealNo(this.sealCode);
				this.ctx.draw(); // 绘制图形
			},
			make() {
				let that = this
				return new Promise((resolve, reject) => {
					uni.canvasToTempFilePath({
							canvasId: 'sealCanvas',
							success(res) {
								if (that.imageType == 'base64') {
									// #ifdef H5
									resolve({
										errMsg: res.errMsg,
										tempFilePath: res.tempFilePath,
										type: 'base64'
									});
									// #endif
									// #ifndef H5
									uni.getFileSystemManager().readFile({
										filePath: res.tempFilePath,
										encoding: 'base64',
										success: (file) => {
											resolve({
												errMsg: res.errMsg,
												tempFilePath: 'data:image/png;base64,' + file.data,
												type: 'base64'
											});
										},
										fail: (error) => {
											console.error({ error, path });
											reject(error);
										}
									});
									// #endif
								} else {
									// #ifndef H5
									resolve({
										errMsg: res.errMsg,
										tempFilePath: res.tempFilePath,
										type: 'png'
									});
									// #endif
									// #ifdef H5
									resolve({
										errMsg: res.errMsg,
										tempFilePath: res.tempFilePath,
										type: 'base64'
									});
									// #endif
								}
							},
							fail(error) {
								reject(error);
							}
						},
						this
					);
				});
			},

			writeCompanyName(name) {
				this.ctx.font = `${this.fontSize.companyFontSize}px Helvetica`;
				let count = name.length;
				var angle = (4 * Math.PI) / (3 * (count - 1)); // 字间角度
				var chars = name.split('');
				var c;
				for (var i = 0; i < count; i++) {
					if (i == 0) this.ctx.rotate((5 * Math.PI) / 6);
					else this.ctx.rotate(angle); //
					this.ctx.save();
					if (this.inCircle) {
						this.ctx.translate(this.sizeNum / 2 - this.fontSize.companyFontSize - 10 - this.sizeNum / 40, 0); // 平移到此位置,此时字和x轴垂直
					} else {
						this.ctx.translate(this.sizeNum / 2 - this.fontSize.companyFontSize - 10, 0);
					}
					this.ctx.rotate(Math.PI / 2); // 旋转90度,让字平行于x轴
					this.ctx.fillStyle = this.color;
					this.ctx.fillText(chars[i], 0, 0); // 此点为字的中心点
					this.ctx.restore();
				}
			},
			writeSealName(name) {
				this.ctx.font = `${this.fontSize.sealTextFontSize}px Helvetica`;
				this.ctx.fillStyle = this.color;
				let data = this.ctx.measureText(name)
				this.ctx.fillText(name, -(data.width / 2), this.sizeNum / 2 / 2.5 + this.fontSize.sealTextFontSize);
			},
			writeFiveStar(width, height) {
				this.ctx.translate(width, height);
				if (this.centerImage) {
					this.ctx.drawImage(this.centerImage, -(this.sizeNum / 2.8 / 2), -(this.sizeNum / 2.8 / 2), this.sizeNum / 2.8, this.sizeNum / 3);
				} else {
					let r1 = width / 2.5;
					var r2 = r1 / 2.5;
					var x1, x2, y1, y2;
					this.ctx.beginPath();
					for (var i = 0; i < 5; i++) {
						x1 = r1 * Math.cos(((54 + i * 72) / 180) * Math.PI);
						y1 = r1 * Math.sin(((54 + i * 72) / 180) * Math.PI);
						x2 = r2 * Math.cos(((18 + i * 72) / 180) * Math.PI);
						y2 = r2 * Math.sin(((18 + i * 72) / 180) * Math.PI);
						this.ctx.lineTo(x2, y2);
						this.ctx.lineTo(x1, y1);
					}
					this.ctx.closePath();
					this.ctx.fillStyle = this.color;
					this.ctx.fill();
				}

				// http://tmp/LbkhkeopwcQUd9c2ce69c61df9f977ef63954975cc41.png
				// http://tmp/JFgX7SPmvfZgf02313932533e836d679641754d3c1bf.png
			},
			writeCircle(wigth, height, radius, lineWidth) {
				this.ctx.beginPath();
				this.ctx.setLineWidth(lineWidth);
				this.ctx.arc(wigth, height, radius - 10, 0, 2 * Math.PI);
				this.ctx.closePath();
				// #ifdef MP-TOUTIAO
				this.ctx.setStrokeStyle(this.color);
				// #endif

				// #ifndef MP-TOUTIAO
				this.ctx.strokeStyle = this.color;
				// #endif
				this.ctx.stroke();
			},
			writeSealNo(sealCode) {
				this.ctx.translate(0, 0); // 平移到此位置,
				this.ctx.setLineWidth(1);
				this.ctx.font = `${this.fontSize.sealCodeFontSize}px Helvetica`;
				var count = sealCode.length; // 字数
				var angle = (-4 * Math.PI) / (12 * (count - 1)); // 字间角度
				var chars = sealCode.split('');
				var c;
				for (var i = 0; i < count; i++) {
					c = chars[i]; // 需要绘制的字符
					if (i == 0) {
						this.ctx.rotate((5 * Math.PI) / 10);
					} else {
						this.ctx.rotate(angle);
					}
					this.ctx.save();
					if (this.inCircle) {
						this.ctx.translate(this.sizeNum / 2 - 10 - this.fontSize.sealCodeFontSize - this.sizeNum / 40, 0); // 平移到此位置,此时字和x轴垂直
					} else {
						this.ctx.translate(this.sizeNum / 2 - 10 - this.fontSize.sealCodeFontSize, 0);
					}
					this.ctx.rotate((Math.PI * 3) / 2); // 旋转90度,让字平行于x轴
					this.ctx.fillText(c, 0, 0); // 此点为字的中心点
					this.ctx.restore();
				}
			},
			getCtx() {
				return new Promise((resolve, reject) => {
					if (this.ctx) {
						resolve(ctx);
					} else {
						uni.createSelectorQuery()
							.in(this)
							.select('#sealCanvas')
							.boundingClientRect()
							.exec((res) => {
								const ctx = uni.createCanvasContext('sealCanvas', this);
								this.ctx = ctx;
								resolve(ctx);
							});
					}
				});
			}
		}
	};
</script>
<style lang="scss">
	.hide {
		position: fixed;
		left: 1500px;
		top: 0;
	}
</style>